<!--
 * @Author: 高稀
 * @Date: 2022-05-23 10:10:43
 * @LastEditTime: 2022-07-29 15:59:15
 * @LastEditors: 代琪 1529992814@qq.com
 * @Description: 登录栏目---栏目代码
 * @FilePath: \code\ctp-static-portal-front\src\components\login\loginContainer.vue

-->
<template>
  <div :id="'loginSection_' + entityId" class="iframeContentAreaBody">
    <div
      class="seeyon-login-container IframeSectionTempleteDiv"
      :style="containerStyle"
      :id="entityId"
      ref="container"
    >
      <iframe
        :src="iframeSrc"
        width="100%"
        height="100%"
        frameBorder="0"
        :id="'IframeSectionTemplete_' + entityId"
        :sectionid="entityId"
        name="IframeSectionTemplete"
      ></iframe>
    </div>

    <div
      id="loginPreBtnIframeDiv"
      class="loginPreBtnIframeDiv"
      style="position: relative; display: none"
    >
      <div
        class="loginBtnClose"
        onclick="vPortalMainFrameElements.loginPreBtn.closeLoginDiv(this);"
      >
        x
      </div>
    </div>
  </div>
</template>

<script>
  import { methods } from '@/utils';
  import { isElementInViewport } from '@/utils/index';
  import emitter from '@/utils/emitter';
  export default {
    name: 'LoginContainer',
    props: {
      withBorder: {
        type: Boolean,
        default: false,
      },
      sectionData: {
        type: Object,
        default: () => ({}),
      },
      // sectionThemeData:{
      //     type: Object,
      //     default: () => ({}),
      // },
      entityId: {
        type: String,
      },
      contentWidth: { type: Number },
    },
    data() {
      return {
        // rowList: '',
        // ctxPath: "/seeyon",
      };
    },
    computed: {
      containerStyle() {
        let style = {
          height: methods.getContentHeight(this.sectionData.options) + 'px',
        };
        return style;
      },
      btnbgc() {
        //登录框按钮颜色
        if (
          this.sectionData &&
          this.sectionData.options &&
          this.sectionData.options.loginboxbuttonbgc
        ) {
          return this.sectionData.options.loginboxbuttonbgc;
        } else {
          return '';
        }
      },
      btmbgc() {
        //登录框按钮颜色
        if (
          this.sectionData &&
          this.sectionData.options &&
          this.sectionData.options.loginboxbottombgc
        ) {
          return this.sectionData.options.loginboxbottombgc;
        } else {
          return '';
        }
      },
      bgc() {
        //背景色
        if (
          this.sectionData &&
          this.sectionData.options &&
          this.sectionData.options.backgroundColor
        ) {
          return this.sectionData.options.backgroundColor;
        } else {
          return '';
        }
      },
      rowList() {
        if (this.sectionData && this.sectionData.options && this.sectionData.options.rowList) {
          return this.sectionData.options.rowList;
        } else {
          // 没有就返回默认数据
          return 'productInfo,blank';
        }
      },
      iframeSrc() {
        // console.log(this.loginboxbuttonbgc_value,this.loginboxbottombgc_value,this.loginboxmainbgc_value)
        // todo: 需要更新登录url
        let tempSrc =
          urlPreStr +
          '/main.do?method=index&&loginFrom=loginPortal&topValue=21&rowList=' +
          this.rowList +
          '&btnbgc=' +
          this.btnbgc +
          '&btombgc=' +
          this.btmbgc +
          '&bgc=' +
          this.bgc;
        // console.log('tempSrc', tempSrc);
        return tempSrc;
      },
    },
    mounted() {
      //取第一个
      if ($('.seeyon-login-container')[0] === this.$refs.container) {
        emitter.publish('loginContainerInit', !isElementInViewport(this.$refs.container));
      }
    },
  };
</script>

<style scoped>
  .IframeSectionTempleteDiv {
    /* height: 320px; */
    overflow: hidden;
  }

  #login-detail-ifra {
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
</style>
